<template>
  <div class="person-room">
    <div class="person-left">
      <div class="conter-box">
        <div class="conter-title"><span>街道疫情</span></div>
        <div class="conter-detail">
          <div>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">新增确诊数</div>
                  <div class="target-num bx-red">0</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">疑似病例数</div>
                  <div class="target-num bx-yellow">0</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">密接人数</div>
                  <div class="target-num bx-yellow">0</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">次密接人数</div>
                  <div class="target-num bx-yellow">0</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">累计治愈</div>
                  <div class="target-num bx-green">2366</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="conter-box">
        <div class="conter-title"><span>街道扫码到访统计</span></div>
        <div class="conter-detail">
          <div>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">到访人数</div>
                  <div class="target-num bx-green">2311</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">同比</div>
                  <div class="target-num bx-green">90%</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">扫码数量</div>
                  <div class="target-num bx-green">3415</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="target-block">
                  <div class="target-title">体温检测数量</div>
                  <div class="target-num bx-green">3415</div>
                </div>
              </el-col>
            </el-row>
            <div class="conter-detail shequfuwu">
              <div id="myChart3" style="width: 100%; height: 2rem"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="conter-box">
        <div class="conter-title"><span>疫苗接种统计</span></div>
        <div class="conter-detail shequjinchu">
          <div class="shequjinchu-left">
            <p>
              <img src="../../assets/person/ren_icon.png" />
              <span>
                <strong>接种人数</strong>
                <i>5667</i>
              </span>
            </p>
            <p>
              <img src="../../assets/person/ren_icon.png" />
              <span>
                <strong>累计接种人数</strong>
                <i>78267</i>
              </span>
            </p>
          </div>
          <div class="shequjinchu-right">
            <ul>
              <li>
                <el-row>
                  <el-col :span="12"><span>社区名</span></el-col>
                  <el-col :span="12" style="text-align: center"
                    ><span>接种完成率</span></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :span="12"><span>中芯花园社区</span></el-col>
                  <el-col :span="12" style="text-align: center"
                    ><strong>98%</strong></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :span="12"><span>亦城名苑社区</span></el-col>
                  <el-col :span="12" style="text-align: center"
                    ><strong>95%</strong></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :span="12"><span>博客雅苑小区</span></el-col>
                  <el-col :span="12" style="text-align: center"
                    ><strong>96%</strong></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :span="12"><span>悦庭小区</span></el-col>
                  <el-col :span="12" style="text-align: center"
                    ><strong>96%</strong></el-col
                  >
                </el-row>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="person-right">
      <div class="conter-box yiqingbaofa">
        <div class="conter-title"><span>疫情爆发地区人口关联性分析</span></div>
        <div class="conter-detail">
          <div class="bo-table" style="padding: 0 10px">
            <el-row type="flex" justify="space-between">
              <el-col :span="6" style="font-size:0.13rem">涉疫区域</el-col>
              <el-col :span="6" style="font-size:0.13rem">涉疫人员到访地</el-col>
              <el-col :span="6" style="font-size:0.13rem">到访地日均入楼人数</el-col>
              <el-col :span="6" style="font-size:0.13rem">到访地当前入楼人数</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">海淀区博雅园</el-col>
              <el-col :span="6">SKP商场</el-col>
              <el-col :span="6">1223</el-col>
              <el-col :span="6">1242</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">海淀区博雅园</el-col>
              <el-col :span="6">金融街商场</el-col>
              <el-col :span="6">2346</el-col>
              <el-col :span="6">1235</el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">海淀区博雅园</el-col>
              <el-col :span="6">金融街商场</el-col>
              <el-col :span="6">1673</el-col>
              <el-col :span="6">1742</el-col>
            </el-row>
          </div>
        </div>
      </div>

      <div class="conter-box yiqingbaofa">
        <div class="conter-title"><span>健康宝扫码入楼情况</span></div>
        <div class="conter-detail jiankanbaoshaoma">
          <ul>
            <li class="border-bottom">
              <img src="../../assets/community/banshi_icon.png" />
              <div>
                <p>
                  <span>昨日入楼总人数</span>
                  <strong>1299</strong>
                </p>
                <p>
                  <span>峰值时段</span>
                  <b>08:00-09:00</b>
                </p>
              </div>
            </li>
            <li class="border-bottom">
              <img src="../../assets/community/banshi_icon.png" />
              <div>
                <p>
                  <span>今日入楼总人数</span>
                  <strong>1566</strong>
                </p>
                <p>
                  <span>峰值时段</span>
                  <b>17:00-19:00</b>
                </p>
              </div>
            </li>
            <li>
              <img src="../../assets/community/banshi_icon.png" />
              <div>
                <p>
                  <span>今日入楼总人数预测</span>
                  <strong>1896</strong>
                </p>
                <p>
                  <span>峰值时段</span>
                  <b>10:00-13:00</b>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="conter-box">
        <div class="conter-title"><span>到访人员健康宝扫码</span></div>
        <div class="conter-detail daofangsaoma" style="display: flex">
          <div id="myChart2" style="width: 50%; height: 1.6rem"></div>
          <ul>
              <li><span>3022人</span><span>100%</span></li>
              <li><span>0人</span><span>0%</span></li>
              <li><span>0人</span><span>0%</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
export default {
  data() {
    return {};
  },
  mounted() {
    let option3 = {
      grid: {
        height: '60%',
        with: 260,
        left: 50,
        top: 40,
      },
      xAxis: {
        type: "category",
        data: [
          "8月6号",
          "8月7号",
          "8月8号",
          "8月9号",
          "8月10号",
          "8月11号",
          "8月12号",
        ].map(item => ({
          value: item,
          textStyle: { color: '#fff' }
        })),
      },
      yAxis: {
        type: "value",
        nameTextStyle:{ color: '#fff' },
        axisLine: {
          lineStyle: {
              color: '#fff'
          }
        },
      },
      series: [
        {
          data: [12, 32, 43, 43, 56, 78, 99],
          type: "line",
        },
      ],
    };
    var myChart3 = echarts.init(document.getElementById("myChart3"));
    myChart3.setOption(option3);


    let option2 = {
        color:['#00FE90', '#FFCD5C','#ff0000'],
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        right: "5%",
        top: "center",
        align: "left",
        itemWidth: 12,
        itemHeight: 8,
        textStyle: {
          color: "#fff",
        },
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "60%"],
          center: ["30%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "绿码" },
            { value: 2, name: "黄码" },
            { value: 0, name: "红码" },
          ],
        },
      ],
    };
    var myChart1 = echarts.init(document.getElementById("myChart2"));
    myChart1.setOption(option2);
  },
};
</script>

<style lang="scss" scoped>
.person-room {
  color: #fff;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.5rem 0;
  box-sizing: border-box;
  .person-left {
    display: flex;
    flex-direction: column;
    width: 6rem;
  }
  .person-content {
    flex: 1;
    padding: 0 0.2rem;
    .target-block {
      padding-top: 15px;
      border: 1px solid #00d8ff;
      background: linear-gradient(322deg, #0043ad 0%, #011f39 100%);
    }
  }
  .person-right {
    display: flex;
    flex-direction: column;
    width: 6.2rem;
  }
}
.conter-box {
  width: 100%;
  background: #071726bd;
  padding: 0.12rem;
  box-sizing: border-box;
  margin-bottom: 0.15rem;
  border-radius: 0.05rem;
  .conter-title {
    position: relative;
    color: #fff;
    font-size: 0.24rem;
    height: 0.4rem;
    &::after {
      position: absolute;
      bottom: -0.1rem;
      left: 0;
      height: 0.1rem;
      width: 100%;
      content: "";
      display: inline-block;
      background: url("../../assets/person/title_bottom.png") no-repeat;
      background-size: 100% 100%;
    }
    span {
      display: inline-block;
      position: relative;
      text-indent: 0.24rem;
      &::after {
        position: absolute;
        top: 0.05rem;
        left: 0;
        content: "";
        display: inline-block;
        width: 0.14rem;
        height: 0.14rem;
        border: 0.02rem solid #65beff;
        border-radius: 50%;
        opacity: 1;
      }
    }
  }
  .conter-detail {
    position: relative;
    margin-top: 0.2rem;
    font-size: 0.16rem;
    box-sizing: border-box;
    .conter-subtitle {
      font-size: 0.2rem;
      padding-left: 10px;
      margin: 5px 0 10px;
      border-bottom: 1px solid #000;
      border-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 0) 1rem,
          #0089ff 2rem,
          rgba(56, 117, 128, 0) 100%
        )
        10 10;
      span {
        margin-bottom: -1px;
        display: inline-block;
        padding: 4px 0;
        border-bottom: 1px solid #000;
      }
      &.green span {
        border-image: linear-gradient(90deg, #00fe90 0%, #387580 100%) 10 10;
      }
      &.blue span {
        border-image: linear-gradient(90deg, #0089ff 0%, #387580 100%) 10 10;
      }
      &.red span {
        border-image: linear-gradient(90deg, #f24466 0%, #806d38 100%) 10 10;
      }
      &.yellow span {
        border-image: linear-gradient(90deg, #ffcd5c 0%, #387580 100%) 10 10;
      }
    }
  }
}

.shequjinchu {
  display: flex;
  height: 1.8rem;
  box-sizing: border-box;
  padding: 0.15rem;
  .shequjinchu-left {
    display: flex;
    flex-direction: column;
    width: 2rem;
    justify-content: space-between;
    p {
      display: flex;

      img {
        width: 0.5rem;
        height: 0.5rem;
      }
      span {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0.15rem;
        color: #00fe90;
        font-size: 0.25rem;
        strong {
          color: #fff;
          font-size: 0.16rem;
        }
        i {
          font-size: 0.25rem;
          font-style: normal;
        }
      }
    }
  }
  .shequjinchu-right {
    margin-left: 0.15rem;
    display: flex;
    flex: 1;
    flex-direction: column;
    border-left: 1px solid #fff;
    padding-left: 0.3rem;
    ul {
      li {
        line-height: 0.3rem;
        font-size: 0.16rem;
        strong {
          color: #00fe90;
        }
      }
    }
  }
}
.yiqingbaofa {
  .bo-table {
    .el-row {
      font-size: 0.13rem;
    }
  }
}
.jiankanbaoshaoma {
  ul {
    display: flex;
    flex-direction: column;
    .border-bottom {
        border-bottom: 0.01rem solid #00d8ff;
    }
    li {
      display: flex;
      padding: 0.05rem 0.2rem;
      
      
      img {
        width: 0.5rem;
        height: 0.5rem;
      }
      div {
        display: flex;
        justify-content: space-between;
        margin-left: 0.2rem;
        flex: 1;
        p {
          display: flex;
          flex-direction: column;
          b {
              color: rgba(255, 205, 92, 1);
          }
          strong {
              color: rgba(0, 254, 144, 1);
              font-size: 0.3rem;
          }
        }
      }
    }
  }
}
.daofangsaoma {
    display: flex;
    align-items: center;
    ul {
        display: flex;
        width: 50%;
        flex-direction: column;
        li {
            display: flex;
            width: 100%;
            justify-content: space-around;
            line-height: 0.5rem;
            font-size: 0.25rem;
            color: #00fe90;
        }
    }
}
</style>